<template>
	<div>
		<!--头部-->
		<dao-hang></dao-hang>
		<div class="head">
			<a href="#/fenlei02"><img class="left-arrow" src="../assets/img/fenlei/laft-arrow.png" /></a>
			<p>面部护理</p>
		</div>
		<div class="center">
			<div class="qingkong">
				<p class="qkjm">洁面护理×</p>
				<p class="qkkh">人气口红×</p>
				<button id="clear">清空</button>
			</div>
			<!--商品-->
			<div v-for="bb in 4" class="gloss">
				<div class="glossLeft">
					<img src="../assets/img/fenlei/chuncai.png" />
				</div>
				<!--右内容-->
				<div class="glossRight">
					<p class="biaogloss">
						焕彩萃璨花蕊唇彩4.8g
					</p>
					<p class="jiegloss">
						焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g
					</p>
					<!--图片-->
					<div class="imggloss">
						<img class="guoqi" src="../assets/img/fenlei/arc.png" />
						<img class="huiji" src="../assets/img/fenlei/fly.png" />
						<span class="hai">海外直邮</span>
						<span class="moneyQ">￥166.06</span>
					</div>
				</div>
			</div>
			<!--轮播图-->
				<div class="wrap">
					<div class="content">
						<img src="../assets/img/fenlei/lunbo1.png"/>
					</div>
					<div><img src="../assets/img/fenlei/lunbo.png"/></div>
				</div>	
			<!--加载更多-->
			<p class="to-load">加载更多</p>
		</div>
	</div>
</template>

<script>
	import daoHang from '@/components/daohang1'
	export default {
		components: {
			daoHang
		},
		methods: {
			daohang: function() {
				$(".nav>a").click(function() {
					$(this).addClass("moren").siblings('a').removeClass("moren");
				});
				var index = 0;
				setInterval(function(){
					$(".wrap div").eq(index).fadeIn(1000).siblings().fadeOut(1000);
					index ++;
					if(index==2){
						index=0;
					}
				},1500);
				$("#clear").click(function(){
					$(".gloss").hide();
				});
			},
		},
		mounted: function() {
			this.daohang();
		}
	}
</script>

<style>
	.head {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 9.6rem;
		background: #e53e42;
	}
	
	.head img {
		position: absolute;
		width: 2.3rem;
		height: 3.5rem;
		left: 2rem;
		top: 2.9rem;
	}
	
	.head p {
		position: absolute;
		font-size: 3.5rem;
		color: #ffffff;
		left: 28.7rem;
		top: 2.5rem;
	}
	/*各个商品*/
	
	.center {
		width: 100%;
		background: #f2f2f2;
	}
	
	.gloss {
		width: 100%;
		height: 20rem;
		border-bottom: 0.01rem solid #cccccc;
		background: white;
		margin-bottom: 2rem;
		overflow: hidden;
	}
	
	.glossLeft {
		width: 20rem;
		height: 20rem;
		text-align: center;
		line-height: 20rem;
		float: left;
	}
	
	.glossLeft>img {
		width: 6.9rem;
		height: 15.3rem;
		margin-top: 2.4rem;
	}
	/*右*/
	
	.glossRight {
		width: 52rem;
		height: 20rem;
		float: left;
	}
	
	.biaogloss {
		font-size: 3rem;
		width: 100%;
		height: 3rem;
		line-height: 3rem;
		margin: 2.8rem 0 2rem 0;
		color: #333333;
	}
	
	.jiegloss {
		font-size: 2.4rem;
		width: 47rem;
		text-align: left;
	}
	
	.imggloss {
		width: 100%;
		height: 6.4rem;
		line-height: 6.4rem;
	}
	
	.guoqi {
		width: 2rem;
		height: 2rem;
		border: 0.01rem solid #CCCCCC;
		margin: 0 2rem;
	}
	
	.huiji {
		width: 3.4rem;
		height: 3.3rem;
		padding-right: 1rem;
	}
	
	.hai {
		font-size: 2.4rem;
		color: #666666;
	}
	
	.moneyQ {
		font-size: 3rem;
		color: #E53E42;
		padding-left: 14rem;
	}
	/**/
	.wrap{
		width: 100%;
		height: 30rem;
		position: relative;
	}
	.wrap>div{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		display: none;
	}
	.wrap .content{
		display: block;
	}
	.wrap div img{
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	.to-load{
		height: 7.3rem;
		width: 100%;
		font-size: 2.3rem;
		line-height: 7.3rem;
	}
	.qingkong{
		height: 9.6rem;
		width: 72rem;
		background: white;
		border-bottom: 0.1rem solid grey;
		line-height: 9.6rem;
	}
	.qkjm,.qkkh{
		font-size: 2.4rem;
		float: left;
		color: white;
		background: darkgray;
		height: 6rem;
		line-height: 6rem;
		border-radius: 1rem;
		margin-top: 1.8rem;
		margin-left: 2rem;
		padding:0 2rem;
	}

	#clear{
		font-size: 2.4rem;
		float: right;
		padding: 1rem 2.6rem;
		background: white;
		border: 0.1rem solid black;
		border-radius: 1rem;
		margin-top: 1.8rem;
		margin-right: 1.8rem;
	}
</style>